<template>
  <div>
      <div class="main">
          <div class="cinema-schedule">
          <div class="header-left" @click="go">
              <img src="@/assets/left.png" alt="" width="11" height="18">
          </div>
          <div class="header-title" v-scroll dis="45">{{cinemalist.name}}</div>
          <div class="cinema-wrap">
              <div class="cinema-info">
                  <div class="tags">
                      <div class="tag" v-for="item in cinemalist.services" :key="item.name">{{item.name}}</div>
                  </div>
                  <div class="address">
                    <img src="@/assets/address.png" alt="" width="14" height="21">
                    <div class="address-des">
                        {{cinemalist.address}}
                    </div>
                    <a href="javascript:;" class="tel-icon">
                        <img src="@/assets/call.png" alt="" width="17" height="18">
                    </a>
                </div>
              </div>
              <div class="schedule-wrap">
                  <div class="film-bg">
                      <div class="img">
                          <img :src="pics[n] && pics[n].poster" alt="" width="100%">
                      </div>
                  </div>
                  <div class="film-list">
                   <div class="swiper-container">
                        <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="pic in pics" :key="pic.filmId" style="width: 81.75px;margin-right: 16px;">
                            <div class="film-item">
                                <div class="img-wrap">
                                    <img :src="pic.poster" alt="" >
                                </div>
                            </div>
                        </div>
                        </div>
                  </div>
                  <div class="triangle">
                      <img src="@/assets/jt.png" width="20" height="10" alt="">
                  </div>
              </div>
              <div class="film-info" v-toscroll dis="250">
                  <div class="film-head">
                      <span class="film-name">
                          {{pics[n] && pics[n].name}}
                      </span>
                      <span class="film-score">
                          {{pics[n] && pics[n].grade}}
                      </span>
                      <span class="film-score-unit">分</span>
                  </div>
                  <div class="film-desc">
                     {{pics[n]&& pics[n].category}}|
                     {{pics[n]&& pics[n].runtime+"分钟"}}
                     <span v-for="(m,k) in pics[n]&&pics[n].actors" :key="k">{{'|'+m.name}}</span>
                  </div>
                  <img src="@/assets/right.png" alt="" width="4" height="8" class="film-more" @click="to(pics[n]&& pics[n].filmId)">
              </div>
              <div class="date-list">
                  <div class="dateWrap">
                      <div class="tabs-bar">
                          <ul class="tabs-nav">
                              <li :class="{active:isshow1}" @click="change(0)">
                                  <span>{{'今天'+new Date(parseInt(pics[n]&&pics[n].showDate[0])*1000).toLocaleString().slice(5, 9).replace('/', '月') + '日'}}</span>
                              </li>
                              <li :class="{active:isshow2}" @click="change(1)" v-if="pics[n]&&pics[n].showDate[1]">
                                  <span>{{'明天'+new Date(parseInt(pics[n]&&pics[n].showDate[1])*1000).toLocaleString().slice(5, 9).replace('/', '月') + '日'}}</span>
                              </li>
                              <li :class="{active:isshow3}" @click="change(2)" v-if="pics[n]&&pics[n].showDate[2]">
                                  <span>{{'后天'+new Date(parseInt(pics[n]&&pics[n].showDate[2])*1000).toLocaleString().slice(5, 9).replace('/', '月') + '日'}}</span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
              <div class="schedule-list" style="min-height: calc(100vh - 44px);">
                 
                  <router-view :list="showlist" :n="n"></router-view>
              </div>
          </div>
      </div>
      </div>
  </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import "swiper/css/swiper.css";
import {getCinemaDetail,getDetailSwiper,getTimeList} from '@/api'
import { relative } from 'path';
export default {
data() {
    return {
        id:'',
        cinemalist:[],
        pics:[],
        n:0,
        showlist:[],
        fid:'',
        date:'',
        m:0,
        isshow1:true,
        isshow2:false,
        isshow3:false,
        flag:true
    }
},
created() {
    this.id = this.$route.params.detailid;
    // this.fid = this.pics[this.n].filmId
    // this.date = this.date = this.pics[this.n].showDate[0]
    
    this.getpic(this.id)
    this.getCinema(this.id)
    // this.getshowlist(this.fid,this.id,this.date)
    // console.log(this.n,this.id,this.filmId)
    // this.tofix()
    
},
mounted() {
    var that = this
     var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      centeredSlides: true,
      spaceBetween: 30,
      grabCursor: true,
      observer:true,
      observeParents:true,
      on:{
        transitionEnd: function(){
            if(that.flag){
                this.activeIndex = that.n
                that.flag = false
            }else{
            that.n = this.activeIndex;
            }
        that.getpic(that.id)
        that.fid = that.pics[that.n].filmId
        that.date = that.pics[that.n].showDate[that.m]
        that.getshowlist(that.fid,that.id,that.date)
        // console.log(that.fid)
        // console.log(that.m)
     }
    },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      
    });
},
directives:{
        scroll:(el,binding)=>{
             window.addEventListener("scroll",()=>{
                var top =document.documentElement.scrollTop||document.body.scrollTop;
                if(top>Number(el.getAttribute('dis'))){
                    el.style.position = 'fixed'
                    el.style.top = 0
                    // el.style.transition = "all 0.5s"

                }else{
                    el.style.position = "relative"
                }
          })
        },
        toscroll:(el,binding)=>{
             window.addEventListener("scroll",()=>{
                var top =document.documentElement.scrollTop||document.body.scrollTop;
                if(top>Number(el.getAttribute('dis'))){
                    el.style.position = 'fixed'
                    el.style.top = "43px"
                    el.style.transition = "all 0.5s"
                }else{
                    el.style.position = "relative"
                    el.style.top = 0
                }
          })
        },

},
// watch: {
//     $route:{
//         handler(n,o){
//             // this.id = n.params.detailid;
//             // this.getCinema(this.id)
//             console.log(this.fid)
//         },
//         deep:true,
//         immediate:true
//     }
// },
methods: {
    getCinema(id){
        getCinemaDetail(id).then(res=>{
            this.cinemalist = res.data.data.cinema
        })
    },
    getpic(id){
        getDetailSwiper(id).then(res=>{
            this.pics = res.data.data.films
        })
    },
    go(){
        this.$router.go(-1)
    },
    to(id){
        this.$router.push('/detail/'+id)
    },
    getshowlist(fid,id,date){
        getTimeList(fid,id,date).then(res=>{
           this.showlist =  res.data.data.schedules
        //    console.log(res.data.data)
        })
    },
    change(m){
        this.m = m
        this.date = this.pics[this.n].showDate[this.m]
        this.getshowlist(this.fid,this.id,this.date)
        if(m === 0){
            this.isshow1=true
            this.isshow2=false
            this.isshow3=false
        }else if(m===1){
            this.isshow1=false
            this.isshow2=true
            this.isshow3=false
        }else{
             this.isshow1=false
            this.isshow3=true
            this.isshow2=false
        }
    },

},
}
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main{
    height: 100%;
    .cinema-schedule{
        overflow: hidden;
        padding-top: 44px;
        background: #fff;
        min-height: 100vh;
        .header-left{
            position: fixed;
            top: 0;
            height: 44px;
            line-height: 44px;
            padding-left: 15px;
            z-index: 303;
        }
        .header-title{
            position: relative;
            text-align: center;
            font-size: 17px;
            color: #191a1b;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            padding: 0 15px;
            background: #fff;
            top: 0;
            height: 44px;
            line-height: 44px;
            z-index: 302;
        }
        .cinema-wrap{
            .cinema-info{
                .tags{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 15px;
                    color: #ffb232;
                    overflow: hidden;
                    position: relative;
                    padding: 5px 0 15px;
                    .tag{
                        position: relative;
                        padding: 0 6px;
                        margin: 0 2.5px;
                        font-size: 10px;
                    }
                }
                .tag:after{
                        content: " ";
                        transform: scale(.5);
                        position: absolute;
                        border: 1px solid #ffb232;
                        top: -50%;
                        right: -50%;
                        bottom: -50%;
                        left: -50%;
                        border-radius: 1px;
                    }
                    .address{
                        height: 50px;
                        position: relative;
                        display: flex;
                        padding-left: 17px;
                        align-items: center;
                        .address-des{
                            font-size: 14px;
                            height: 20px;
                            padding: 0 12px;
                            flex: 1;
                            position: relative;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            text-align: center
                        }
                        .address-des:after {
                            content: " ";
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 1px;
                            bottom: 0;
                            border-right: 1px solid #ededed;
                            color: #ededed;
                            transform-origin: 100% 0;
                            transform: scaleX(.5);
                        }
                        .tel-icon {
                                height: 18px;
                                padding: 0 25px;
                                outline: none;
                            }
                    }
            }
            .schedule-wrap{
                position: relative;
                .film-bg {
                    position: absolute;
                    top: 0;
                    height: 129px;
                    width: 100%;
                    padding: 15px 0;
                    overflow: hidden;
                    .img {
                        height: 100%;
                        width: 100%;
                        filter: blur(30px);
                        // background-color:#000;
                    }
                }
                .film-info{
                    width: 100%;
                    background: #fff;
                    height: 80px;
                    padding: 15px 0;
                    position: relative;
                    z-index: 999;
                    .film-head{
                        margin-bottom: 10px;
                        text-align: center;
                        line-height: 18px;
                        .film-name{
                            font-size: 15px;
                            color: #191a1b;
                            padding-right: 5px;
                        }
                        .film-score{
                            font-size: 16px;
                            font-style: italic;
                            color: #ffb232;
                        }
                        .film-score-unit {
                                font-size: 10px;
                                color: #ffb232;
                            }
                    }
                    .film-desc{
                        text-align: center;
                        height: 18px;
                        color: #797d82;
                        font-size: 13px;
                        padding: 0 12%;
                        overflow: hidden;
                        -o-text-overflow: ellipsis;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .film-more {
                        position: absolute;
                        right: 15px;
                        top: 0;
                        margin-top: 36px;
                    }
                }
            }
            .film-list {
                    height: 160px;
                    padding: 15px 0;
                    position: relative;
                    .film-item{
                        padding-top: 0;
                        transition: all .5s ease;
                        display: flex;
                        justify-content: center;
                        height: 100%;
                        width: 100%;
                        .img-wrap{
                            width: 72px!important;
                            transition: all .5s ease;
                            height:104px;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    .triangle {
                        position: relative;
                        display: flex;
                        justify-content: center;
                    }
                    .swiper-slide{
                        text-align: center;
                        font-size: 18px;
                        background: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        transition: 0.3s;
                        transform: scale(0.8)
                    }
                    .swiper-slide-active,.swiper-slide-duplicate-active{
                        transform:scale(1)
                    }
                }
               .date-list{
                   width: 100%;
                   z-index: 999;
                   background: #fff;
                   .dateWrap{
                       position: relative;
                    //    z-index: 100;
                       width: 100%;
                       overflow-x: hidden;
                       background: #fff;
                       .tabs-bar{
                           height: 49px;
                           display: flex;
                           align-items: center;
                           overflow-x: auto;
                           overflow-y: hidden;
                           transition: transform .2s cubic-bezier(.35,0,.25,1);
                            position: relative;
                            .tabs-nav{
                                display: flex;
                                display: -webkit-flex;
                                justify-content: flex-start;
                                align-items: center;
                                position: relative;
                                width: 100%;
                                height: 100%;
                                li {
                                    flex-shrink: 0;
                                    color: #191a1b;
                                    text-align: center;
                                    height: 16px;
                                    line-height: 49px;
                                    font-size: 14px;
                                    cursor: pointer;
                                    // width: 100%;
                                    height:100%;
                                    padding: 0 15px;
                                    span{
                                        display: block;
                                        // width: 100%;
                                        height:100%;;
                                         
                                    }
                                }
                                .active{
                                    color: #ff5f16;
                                    border-bottom:2px solid #ff5f16;
                                   
                                }
                            }
                       }
                       .tabs-bar:after {
                            content: " ";
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            height: 1px;
                            border-bottom: 1px solid #ededed;
                            color: #ededed;
                            transform-origin: 0 100%;
                            transform: scaleY(.5);
                        }
                   }
               } 
        }
    }
}
</style>